<script setup>
import { ref, reactive, inject } from "vue";
import { NDescriptions, NDescriptionsItem } from "naive-ui";
const goods = inject("goods");
</script>

<template>
  <div class="goods-detail">
    <!-- 属性 -->
    <n-descriptions
      label-placement="left"
      :column="2"
      style="margin-bottom: 30px"
    >
      <n-descriptions-item
        v-for="item in goods.details.properties"
        :key="item.value"
        :label="item.name"
        :label-style="{ color: '#666' }"
        :content-style="{ color: '#666' }"
      >
        {{ item.value }}
      </n-descriptions-item>
    </n-descriptions>

    <!-- 图片 -->
    <img
      v-for="item in goods.details.pictures"
      :key="item"
      v-lazy="item"
      alt=""
    />
  </div>
</template>

<style scoped lang='less'>
.goods-detail {
  padding: 30px;
  > img {
    width: 100%;
    object-fit: cover;
  }
}
</style>